<template>
  <div class="user-setting-container">
    <a-card title="用户设置" class="user-card">
      <template #extra>
        <a-button type="primary" @click="showPasswordModal = true">修改密码</a-button>
      </template>

      <div class="profile-layout">
        <!-- 左侧头像 -->
        <div class="avatar-section">
          <div class="avatar-wrapper">
            <ImageUpload v-model="userInfo.urAvatar" @success="uploadUser" />
          </div>
        </div>

        <!-- 右侧信息 -->
        <div class="info-section">
          <div class="info-row">
            <span class="label">昵称：</span>
            <span>{{ userInfo.urName }}</span>
          </div>
          <div class="info-row">
            <span class="label">用户名：</span>
            <span>{{ userInfo.urUsername }}</span>
          </div>
          <div class="info-row">
            <span class="label">邮箱：</span>
            <span>{{ userInfo.urEmail }}</span>
          </div>
          <div class="info-row">
            <span class="label">性别：</span>
            <span>{{ userInfo.urSex === 0 ? '男' : '女' }}</span>
          </div>
          <div class="info-row">
            <span class="label">状态：</span>
            <span :class="['status-tag', { active: userInfo.urStuats === 1 }]">
              {{ userInfo.urStuats === 1 ? '正常' : '冻结' }}
            </span>
          </div>
        </div>
      </div>
    </a-card>

    <!-- 修改密码 Modal -->
    <a-modal title="修改密码" v-model:open="showPasswordModal" @ok="handlePasswordSubmit" :confirmLoading="loading">
      <a-form :model="passwordForm" layout="vertical">
        <a-form-item label="原密码" :validateStatus="formErrors.oldPassword ? 'error' : ''" :help="formErrors.oldPassword">
          <a-input-password v-model:value="passwordForm.oldPassword" placeholder="请输入原密码" />
        </a-form-item>
        <a-form-item label="新密码" :validateStatus="formErrors.newPassword ? 'error' : ''" :help="formErrors.newPassword">
          <a-input-password v-model:value="passwordForm.newPassword" placeholder="请输入新密码" />
        </a-form-item>
        <a-form-item label="确认新密码" :validateStatus="formErrors.confirmPassword ? 'error' : ''"
          :help="formErrors.confirmPassword">
          <a-input-password v-model:value="passwordForm.confirmPassword" placeholder="请再次输入新密码" />
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>
<script setup>
import ImageUpload from '#/components/ImageUpload.vue'
import { onMounted, ref } from 'vue'
import { message } from 'ant-design-vue'
import { updatePasswordApi, updateUserApi } from '#/api/object/user'
import { useUserStore } from '@vben/stores';
const userInfo = ref({ urAvatar: "" })
const userStore = useUserStore();
onMounted(() => {
  const stored = localStorage.getItem("userInfo")
  if (stored) {
    userInfo.value = JSON.parse(stored)
  }
})

// 控制弹窗显示
const showPasswordModal = ref(false)

// 表单数据
const passwordForm = ref({
  oldPassword: '',
  newPassword: '',
  confirmPassword: ''
})

// 错误提示
const formErrors = ref({
  oldPassword: '',
  newPassword: '',
  confirmPassword: ''
})

// 加载状态
const loading = ref(false)

// 提交修改密码
const handlePasswordSubmit = () => {
  // 清空错误
  formErrors.value = {
    oldPassword: '',
    newPassword: '',
    confirmPassword: ''
  }

  const { oldPassword, newPassword, confirmPassword } = passwordForm.value

  // 表单验证
  let hasError = false

  if (!oldPassword.trim()) {
    formErrors.value.oldPassword = '请输入原密码'
    hasError = true
  }

  if (!newPassword.trim()) {
    formErrors.value.newPassword = '请输入新密码'
    hasError = true
  } else if (newPassword.length < 5) {
    formErrors.value.newPassword = '新密码至少5位'
    hasError = true
  }

  if (newPassword !== confirmPassword) {
    formErrors.value.confirmPassword = '两次输入的密码不一致'
    hasError = true
  }

  if (hasError) return

  // 开始提交
  loading.value = true


  updatePasswordApi(passwordForm.value.oldPassword, passwordForm.value.newPassword).then(res => {
    message.success('密码修改成功')
    // 清空表单
    passwordForm.value = {
      oldPassword: '',
      newPassword: '',
      confirmPassword: ''
    }
    showPasswordModal.value = false
  }).finally(() => {
    loading.value = false
  })
}

const uploadUser = (url) => {
  updateUserApi(userInfo.value).then(res => {
    localStorage.setItem("userInfo", JSON.stringify(userInfo.value))
    userStore.setUserInfo(userInfo.value)
  })
}
</script>

<style scoped>
.user-setting-container {
  padding: 40px;
  /* background-color: #f3f6fa; */
}

.user-card {
  max-width: 900px;
  margin: auto;
  border-radius: 20px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease-in-out;
  background-color: #ffffff;
}

.user-card:hover {
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
}

.profile-layout {
  display: flex;
  align-items: center;
  gap: 40px;
  padding: 24px;
}

.avatar-section {
  flex-shrink: 0;
  width: 180px;
  height: 180px;
  border-radius: 10%;
  overflow: hidden;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease;
}

.avatar-section:hover {
  transform: scale(1.05);
}

.avatar-wrapper {
  width: 100%;
  height: 100%;
  object-fit: cover;
  background-color: #e8eef4;
  display: flex;
  justify-content: center;
  align-items: center;
}

.info-section {
  flex-grow: 1;
  font-size: 17px;
  color: #333;
}

.info-row {
  margin-bottom: 18px;
  display: flex;
  align-items: center;
}

.label {
  font-weight: bold;
  color: #555;
  min-width: 80px;
  text-align: right;
  margin-right: 16px;
}

.status-tag {
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 14px;
  color: white;
  background-color: #ccc;
  transition: background-color 0.3s ease;
}

.status-tag.active {
  background-color: #4caf50;
}
</style>
